<template>
  <div class="user">
    <div class="head">
      <div>
        <el-form ref="form" :inline="true" :model="selectData" label-width="80px">
          <el-form-item label="用户名称">
            <el-input v-model="selectData.name" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="select">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button type="success" @click="addRoot">新增管理员</el-button>
      </div>
    </div>
    <div class="body">
      <el-table
        v-loading="isLoading"
        :stripe="true"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          type="expand"
        >
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="最近登录时间">
                <span>{{ props.row.loginTime == null ? "暂无登录":props.row.loginTime }}</span>
              </el-form-item>
              <el-form-item label="邮箱地址">
                <span>{{ props.row.email == null ? "暂无该信息":props.row.email }}</span>
              </el-form-item>
              <el-form-item label="对应权限">
                <span>{{ props.row.type === 1 ? "反馈建议权限":props.row.type === 2 ? "提现权限" :props.row.type === 8 ?"主管理员" :props.row.type === 9?"所有权限":"未分配权限" }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="姓名"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="电话号码"
          align="center"
        />
        <el-table-column
          label="状态"
          align="center"
          prop="status"
        >
          <template slot-scope="scope">
            <el-tag>{{ scope.row.status === 0 ? "暂时不可用":scope.row.status === 1?"永久不可用":scope.row.status===9 ? "正常可用":"无状态" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="primary" @click="updateUser(scope.row)">修改</el-button>
            <el-button @click="deleteUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="权限"
        >
          <template slot-scope="scope">
            <el-button type="success" @click="checkType(scope.row)">权限管理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--新增管理员-->
    <el-dialog
      :title="title"
      :visible.sync="addRootStatus"
      width="30%"
      :before-close="closeRoot"
    >
      <el-form :model="userData">
        <el-form-item label="用户名" label-width="120px">
          <el-input v-model="userData.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" label-width="120px">
          <el-input v-model="userData.password" autocomplete="off" type="password" />
        </el-form-item>
        <el-form-item label="昵称" label-width="120px">
          <el-input v-model="userData.nickname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号码" label-width="120px">
          <el-input v-model="userData.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱号码" label-width="120px">
          <el-input v-model="userData.email" autocomplete="off" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addRootStatus = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>

    <!--    信息修改-->
    <el-dialog
      :title="title"
      :visible.sync="dataStatus"
      width="30%"
      :before-close="close"
    >
      <el-form :model="userData">
        <el-form-item label="用户名" label-width="120px">
          <el-input v-model="userData.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" label-width="120px">
          <el-input v-model="userData.password" autocomplete="off" type="password" />
        </el-form-item>
        <el-form-item label="昵称" label-width="120px">
          <el-input v-model="userData.nickname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号码" label-width="120px">
          <el-input v-model="userData.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱号码" label-width="120px">
          <el-input v-model="userData.email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="权限管理" label-width="120px">
          <el-select v-model="userData.status" placeholder="请选择对应状态">
            <el-option label="暂时禁用" :value="1" />
            <el-option label="封号禁用" :value="2" />
            <el-option label="正常可用" :value="9" />
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dataStatus = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </span>
    </el-dialog>

    <!--    权限修改-->
    <el-dialog
      :title="title"
      :visible.sync="statusDia"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="userData">
        <el-form-item label="权限管理" label-width="120px">
          <el-select v-model="userData.type" placeholder="请选择对应权限">
            <el-option label="反馈建议权限" :value="1" />
            <el-option label="提现权限" :value="2" />
            <el-option label="主管理员" :value="8" />
            <el-option label="所有权限" :value="9" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="statusDia = false">取 消</el-button>
        <el-button type="primary" @click="checkUserType">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { operation } from '@/api/admin'
import { addRoot, checkUser, DeleteUser, updateUserData } from '@/api/user'

export default {
  name: 'Index',
  data() {
    return {
      addRootStatus: false,
      isLoading: false,
      title: '',
      // 弹出框
      statusDia: false,
      dataStatus: false,
      selectData: {},
      tableData: [],
      DeleteList: {
        deleteFlag: 'true',
        tag: 'ADMIN',
        id: 0,
        isLoading: false
      },
      userData: {}
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    // 新增管理员弹窗
    addRoot() {
      this.userData = {}
      this.title = '新增管理员'
      this.addRootStatus = true
    },
    // 添加管理员
    async add() {
      console.log(this.userData)
      const res = await addRoot(this.userData)
      if (res.code === 200) {
        this.message(res.data)
      }
      this.addRootStatus = false
      await this.fetch()
    },
    // 消息提示
    message(data) {
      this.$message({
        message: data,
        type: 'success'
      })
    },
    // 弹出框关闭
    handleClose(done) {
      this.statusDia = false
    },
    close(done) {
      this.dataStatus = false
    },
    closeRoot(done) {
      this.addRootStatus = false
    },
    // 信息修改
    updateUser(row) {
      this.dataStatus = true
      this.userData = row
      this.title = '信息修改'
    },
    // 提交修改
    async update() {
      const data = {
        'email': this.userData.email,
        'id': this.userData.id,
        'image': this.userData.image,
        'name': this.userData.name,
        'nickname': this.userData.nickname,
        'password': this.userData.password,
        'phone': this.userData.phone,
        'status': this.userData.status,
        'type': null
      }
      const res = await updateUserData(data)
      if (res.code === 200) {
        this.message(res.data)
      }
      await this.fetch()
      this.dataStatus = false
    },
    // 权限修改
    checkType(row) {
      this.userData = row
      this.statusDia = true
      this.title = '权限修改'
    },
    // 提交修改
    async checkUserType() {
      const data = {
        'id': this.userData.id,
        'status': this.userData.type,
        'name': this.userData.name
      }
      const res = await checkUser(data)
      if (res.code === 200) {
        this.message(res.data)
      }
      await this.fetch()
      this.statusDia = false
    },
    async fetch() {
      this.isLoading = true
      const res = await operation({
        keyword: '',
        status: '',
        size: 10,
        page: 1,
        tag: 'ADMIN'
      })
      this.isLoading = false
      this.tableData = res.data
      console.log(res)
    },
    // 删除管理员
    async deleteUser(row) {
      this.DeleteList.id = row
      const res = await DeleteUser(this.DeleteList)
      if (res.code === 200) {
        this.message(res.data)
      }
      await this.fetch()
    },
    select() {
      console.log('select')
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-table-expand{
  display: flex;
  flex-direction: column;
}
.user {
  padding: 10px;
  min-height: 100vh;
  .head{
    display: flex;
    justify-content: space-between;
    background-color: white;
    margin-top: 10px;
    padding: 30px 10px 10px 10px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    .head-btn{
      padding: 10px;
    }
  }

  .body{
    margin-top: 20px;
    //padding: 10px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
}

</style>
